Proč si HTML myslí, že „chucknorris“ je barva?

Jedná se o pozdržení z doby Netscape:
Chybějící číslice jsou považovány za 0 [...]. Nesprávná číslice je jednoduše interpretována jako 0. Například hodnoty # F0F0F0, F0F0F0, F0F0F, #FxFxFx a FxFxFx jsou stejné.
Je z příspěvku na blogu Trochu chvástat se o analýze barev aplikace Microsoft Internet Explorer, která ji velmi podrobně pokrývá, včetně různých délek barevných hodnot atd.
Pokud pravidla použijeme postupně z příspěvku na blogu, získáme následující:
Nahraďte všechny neplatné šestnáctkové znaky čísly 0:
z chucknorris se stává c00c0000000
Vyplňte následující celkový počet znaků dělitelný 3 (11 → 12):
c00c 0000 0000
Rozdělte se do tří stejných skupin, přičemž každá složka představuje odpovídající barevnou složku barvy RGB:
RGB (c00c, 0000, 0000)
Zkraťte každý z argumentů zprava dolů na dva znaky.
Což nakonec dává následující výsledek:
RGB (c0, 00, 00) = # C00000 nebo RGB (192, 0, 0)
Zde je příklad demonstrace atributu bgcolor v akci, který umožňuje vytvoření tohoto „úžasného“ vzorníku barev:


 chuck norris 
 pan T 
 ninjaturtle 


 špatně 
 kecy 
 tráva 


To také odpovídá na druhou část otázky: Proč bgcolor = "chucknorr" vytváří žlutou barvu? Pokud použijeme pravidla, řetězec je:
c00c00000 => c00 c00 000 => c0 c0 00 [RGB (192, 192, 0)]
Což dává světle žluté zlato barvu. Vzhledem k tomu, že řetězec začíná jako 9 znaků, ponecháme si tentokrát druhé „C“, a proto skončí v konečné hodnotě barvy.
Původně jsem se s tím setkal, když někdo poukázal na to, že můžete udělat color = "kecy", a dobře, vychází to hnědé.
|
Omlouvám se, že nesouhlasím, ale podle pravidel pro analýzu hodnoty staré barvy zveřejněné @Yuhong Bao se chucknorris NEPROVEDUJE k # CC0000, ale spíše k # C00000, velmi podobný, ale mírně odlišný odstín červené. K ověření jsem použil doplněk Firefox ColorZilla.
Pravidla stanoví:
udělejte řetězec délkou, která je násobkem 3 přidáním 0s: chucknorris0
oddělte řetězec na 3 stejně dlouhé řetězce: chuc knor ris0
zkrátit každý řetězec na 2 znaky: ch kn ri
Ponechte hexadecimální hodnoty a v případě potřeby přidejte 0: C0 00 00
Pomocí těchto pravidel jsem mohl správně interpretovat následující řetězce:
LuckyCharms
štěstí
LuckBeALady
LuckBeALadyTonight
GangnamStyle
UPDATE: Původní respondenti, kteří uvedli, že barva je # CC0000, od té doby upravili své odpovědi tak, aby obsahovaly opravu.
|
Většina prohlížečů jednoduše ignoruje jakékoli NON-hex hodnoty ve vašem barevném řetězci a nahradí jiné než hexadecimální číslice nulami.
ChuCknorris překládá do c00c0000000. V tomto okamžiku prohlížeč rozdělí řetězec na tři stejné části, což indikuje hodnoty červené, zelené a modré: c00c 0000 0000. Extra bity v každé sekci budou ignorovány, čímž bude výsledný výsledek # c00000, což je načervenalá barva.
Toto se nevztahuje na analýzu barev CSS, která se řídí standardem CSS.
  Načervenalé  
  Stejné jako výše  
  Černá  
|
Důvodem je to, že prohlížeč tomu nerozumí a pokusí se to nějakým způsobem přeložit na to, čemu rozumí, a v tomto případě do hexadecimální hodnoty! ...
chucknorris začíná písmenem c, což je rozpoznaný znak v šestnáctkové soustavě, také převádí všechny nerozpoznané znaky na 0!
Takže chucknorris v hexadecimálním formátu se stane: c00c00000000, všechny ostatní znaky se stanou 0 a c zůstane tam, kde jsou ...
Nyní se dělí 3 pro RGB (červená, zelená, modrá) ... R: c00c, G: 0000, B: 0000 ...
Ale víme, že platná hexadecimální hodnota pro RGB je jen 2 znaky, což znamená R: c0, G: 00, B: 00
Skutečný výsledek je tedy:
bgcolor = "# c00000";
Také jsem přidal kroky v obrázku jako rychlou referenci pro vás:
|
Prohlížeč se pokouší převést chucknorris na hexadecimální barevný kód, protože to není platná hodnota.
V chucknorris není všechno kromě c platnou hexadecimální hodnotou.
Převede se tedy na c00c00000000.
Což se stává # c00000, odstín červené.
Zdá se, že to je problém především s Internet Explorer a Opera (12), protože Chrome (31) i Firefox (26) to prostě ignorují.
P.S. Čísla v závorkách jsou verze prohlížeče, na kterých jsem testoval.
Na lehčí notu
Chuck Norris nesplňuje webové standardy. Webové standardy odpovídají
jemu. # BADA55
|
Specifikace WHATWG HTML má přesný algoritmus pro analýzu starší barvyhodnota:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Kód Netscape Classic používaný k analýze barevných řetězců je open source:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Například si všimněte, že každý znak je analyzován jako hexadecimální číslice a poté je posunut na 32bitové celé číslo bez kontroly přetečení. Pouze 32 hexadecimálních číslic se vejde do 32bitového celého čísla, a proto se zohlední pouze posledních 8 znaků. Po analýze hexadecimálních číslic na 32bitová celá čísla jsou poté zkrácena na 8bitová celá čísla dělením 16, dokud se nevejdou na 8bitová čísla, a proto jsou úvodní nuly ignorovány.
Aktualizace: Tento kód přesně neodpovídá tomu, co je definováno ve specifikaci, ale jediným rozdílem je několik řádků kódu. Myslím, že to byly tyto řádky, které byly přidány (v Netscape 4):
if (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Odpovědět:
Prohlížeč se pokusí převést chucknorris na hexadecimální hodnotu.
Protože c je jediný platný hexadecimální znak v chucknorris, hodnota se změní na: c00c00000000 (0 pro všechny hodnoty, které byly neplatné).
Prohlížeč poté rozdělí výsledek do 3 skupin: červená = c00c, zelená = 0000, modrá = 0000.
Jelikož platné hexadecimální hodnoty pro pozadí html obsahují pouze 2 číslice pro každý typ barvy (r, g, b), poslední 2 číslice jsou zkráceny z každé skupiny, takže hodnota rgb c00000 je cihlově načervenalá barva.
|
chucknorris začíná písmenem c a prohlížeč jej načte do hexadecimální hodnoty.
Protože A, B, C, D, E a F jsou znaky v šestnáctkové soustavě.
Prohlížeč převede chucknorris na hexadecimální hodnotu C00C00000000.
Poté se šestnáctková hodnota C00C00000000 převede do formátu RGB (děleno 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Prohlížeč potřebuje k označení barvy pouze dvě číslice:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Nakonec ve webovém prohlížeči zobrazte bgcolor = C00000.
Zde je příklad, který to ukazuje:


 chucknorris 
 c00c00000000 
 c00000 


|
Pravidla pro analýzu barev u starších atributů zahrnují další kroky, než které jsou uvedeny v existujících odpovědích. Zkrácená komponenta na dvoucifernou část je popsána jako:
Zahodit všechny znaky kromě posledních 8
Zrušte úvodní nuly jednu po druhé, pokud mají všechny komponenty počáteční nulu
Zahodit všechny znaky kromě prvních 2
Nějaké příklady:
oooFoooFoooF
000F 000F 000F <- vyměňte, vycpávejte a blokujte
0F 0F 0F <- počáteční nuly oříznuty
0F 0F 0F <- zkrácen na 2 znaky zprava
oooFooFFoFFF
000F 00FF 0FFF <- vyměňte, vycpávejte a blokujte
00F 0FF FFF <- počáteční nuly oříznuty
00 0F FF <- zkrácen na 2 znaky zprava
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- vyměňte, vycpávejte a blokujte
BC000000 BC000000 BC000000 <- zkrácen na 8 znaků zleva
BC BC BC <- zkrácen na 2 znaky zprava
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- vyměňte, pad a blok
0C000000 0C000000 0C000000 <- zkrácen na 8 znaků zleva
C000000 C000000 C000000 <- počáteční nuly oříznuty
C0 C0 C0 <- zkrácen na 2 znaky zprava
Níže je částečná implementace algoritmu. Nezpracovává chyby ani případy, kdy uživatel zadá platnou barvu.
funkce parseColor (vstup) {
// todo: chyba návratu, pokud je vstup „“
vstup = vstup.trim ();
// todo: chyba návratu, pokud je vstup „průhledný“
// todo: vrátit odpovídající #rrggbb, pokud je vstup pojmenovanou barvou
// todo: návrat #rrggbb, pokud vstup odpovídá #rgb
// úkol: nahraďte Unicode body kódu větší než U + FFFF 00
if (input.length> 128) {
vstup = vstup.slice (0, 128);
}
if (input.charAt (0) === "#") {
vstup = vstup.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
vstup + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
if (r.length> 8) {
r = r. řez (-8);
g = g. řez (-8);
b = b. řez (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. řez (1);
g = g. řez (1);
b = b. řez (1);
}
if (r.length> 2) {
r = r. řez (0, 2);
g = g. řez (0, 2);
b = b. řez (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (funkce () {
$ ("# input"). on ("change", function () {
var input = $ (this) .val ();
var color = parseColor (vstup);
var $ buňky = $ ("# výsledek tbody td");
$ cells.eq (0) .attr ("bgcolor", vstup);
$ cells.eq (1) .attr ("bgcolor", barva);
varhodnota:
https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value.
Kód Netscape Classic používaný k analýze barevných řetězců je open source:
https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155.
Například si všimněte, že každý znak je analyzován jako hexadecimální číslice a poté je posunut na 32bitové celé číslo bez kontroly přetečení. Pouze 32 hexadecimálních číslic se vejde do 32bitového celého čísla, a proto se zohlední pouze posledních 8 znaků. Po analýze hexadecimálních číslic na 32bitová celá čísla jsou poté zkrácena na 8bitová celá čísla dělením 16, dokud se nevejdou na 8bitová čísla, a proto jsou úvodní nuly ignorovány.
Aktualizace: Tento kód přesně neodpovídá tomu, co je definováno ve specifikaci, ale jediným rozdílem je několik řádků kódu. Myslím, že to byly tyto řádky, které byly přidány (v Netscape 4):
if (bytes_per_val> 4)
{
bytes_per_val = 4;
}
|
Odpovědět:
Prohlížeč se pokusí převést chucknorris na hexadecimální hodnotu.
Protože c je jediný platný hexadecimální znak v chucknorris, hodnota se změní na: c00c00000000 (0 pro všechny hodnoty, které byly neplatné).
Prohlížeč poté rozdělí výsledek do 3 skupin: červená = c00c, zelená = 0000, modrá = 0000.
Jelikož platné hexadecimální hodnoty pro pozadí html obsahují pouze 2 číslice pro každý typ barvy (r, g, b), poslední 2 číslice jsou zkráceny z každé skupiny, takže hodnota rgb c00000 je cihlově načervenalá barva.
|
chucknorris začíná písmenem c a prohlížeč jej načte do hexadecimální hodnoty.
Protože A, B, C, D, E a F jsou znaky v šestnáctkové soustavě.
Prohlížeč převede chucknorris na hexadecimální hodnotu C00C00000000.
Poté se šestnáctková hodnota C00C00000000 převede do formátu RGB (děleno 3):
C00C00000000 ⇒ R: C00C, G: 0000, B: 0000
Prohlížeč potřebuje k označení barvy pouze dvě číslice:
R: C00C, G: 0000, B: 0000 ⇒ R: C0, G: 00, B: 00 ⇒ C00000
Nakonec ve webovém prohlížeči zobrazte bgcolor = C00000.
Zde je příklad, který to ukazuje:


 chucknorris 
 c00c00000000 
 c00000 


|
Pravidla pro analýzu barev u starších atributů zahrnují další kroky, než které jsou uvedeny v existujících odpovědích. Zkrácená komponenta na dvoucifernou část je popsána jako:
Zahodit všechny znaky kromě posledních 8
Zrušte úvodní nuly jednu po druhé, pokud mají všechny komponenty počáteční nulu
Zahodit všechny znaky kromě prvních 2
Nějaké příklady:
oooFoooFoooF
000F 000F 000F <- vyměňte, vycpávejte a blokujte
0F 0F 0F <- počáteční nuly oříznuty
0F 0F 0F <- zkrácen na 2 znaky zprava
oooFooFFoFFF
000F 00FF 0FFF <- vyměňte, vycpávejte a blokujte
00F 0FF FFF <- počáteční nuly oříznuty
00 0F FF <- zkrácen na 2 znaky zprava
ABCooooooABCooooooABCoooooo
ABC000000 ABC000000 ABC000000 <- vyměňte, vycpávejte a blokujte
BC000000 BC000000 BC000000 <- zkrácen na 8 znaků zleva
BC BC BC <- zkrácen na 2 znaky zprava
AoCooooooAoCooooooAoCoooooo
A0C000000 A0C000000 A0C000000 <- vyměňte, pad a blok
0C000000 0C000000 0C000000 <- zkrácen na 8 znaků zleva
C000000 C000000 C000000 <- počáteční nuly oříznuty
C0 C0 C0 <- zkrácen na 2 znaky zprava
Níže je částečná implementace algoritmu. Nezpracovává chyby ani případy, kdy uživatel zadá platnou barvu.
funkce parseColor (vstup) {
// todo: chyba návratu, pokud je vstup „“
vstup = vstup.trim ();
// todo: chyba návratu, pokud je vstup „průhledný“
// todo: vrátit odpovídající #rrggbb, pokud je vstup pojmenovanou barvou
// todo: návrat #rrggbb, pokud vstup odpovídá #rgb
// úkol: nahraďte Unicode body kódu větší než U + FFFF 00
if (input.length> 128) {
vstup = vstup.slice (0, 128);
}
if (input.charAt (0) === "#") {
vstup = vstup.slice (1);
}
input = input.replace (/ [^ 0-9A-Fa-f] / g, "0");
while (input.length === 0 || input.length% 3> 0) {
vstup + = "0";
}
var r = input.slice (0, input.length / 3);
var g = input.slice (input.length / 3, input.length * 2/3);
var b = input.slice (input.length * 2/3);
if (r.length> 8) {
r = r. řez (-8);
g = g. řez (-8);
b = b. řez (-8);
}
while (r.length> 2 && r.charAt (0) === "0" && g.charAt (0) === "0" && b.charAt (0) === "0") {
r = r. řez (1);
g = g. řez (1);
b = b. řez (1);
}
if (r.length> 2) {
r = r. řez (0, 2);
g = g. řez (0, 2);
b = b. řez (0, 2);
}
return "#" + r.padStart (2, "0") + g.padStart (2, "0") + b.padStart (2, "0");
}
$ (funkce () {
$ ("# input"). on ("change", function () {
var input = $ (this) .val ();
var color = parseColor (vstup);
var $ buňky = $ ("# výsledek tbody td");
$ cells.eq (0) .attr ("bgcolor", vstup);
$ cells.eq (1) .attr ("bgcolor", barva);
var